<template>
    <div class="checkbox-wrapper">
        <label class="label">{{ label }}</label>
        <el-checkbox-group v-model="selectedValues" @change="handleChange" class="checkbox-grid">
            <el-checkbox v-for="option in options" :key="option.value" :label="option.value" class="checkbox-item">
                {{ option.label }}
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
export default {
    name: 'SelectableCheckboxGroup',
    props: {
        label: {
            type: String,
            required: true
        },
        options: {
            type: Array,
            required: true
        },
        modelValue: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            selectedValues: [...this.modelValue]
        };
    },
    watch: {
        modelValue(newVal) {
            this.selectedValues = [...newVal];
        },
        selectedValues(newVal) {
            console.log('内部选中值变化:', newVal);
        }
    },
    methods: {
        handleChange(newVal) {
            this.$emit('update:modelValue', newVal);
            this.$emit('update', { value: newVal }); // 可选
        }
    }
};
</script>

<style scoped>
.checkbox-wrapper {
    margin-bottom: 16px;
    font-size: 16px;
    /* 设置默认字体大小 */
}


.label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3列 */
    row-gap: 10px;
    column-gap: 20px;
}

.checkbox-item {
    white-space: nowrap;
    font-size: 16px !important;
}
</style>
